<template>
<!--    <div class="container-box-container container-box-container-margin">-->
<!--        <div class="goBack border-radius-top fontSize16">-->
<!--            <el-button type="text" @click="$utilsSet.goBack($router)" icon="el-icon-arrow-left">活动详情</el-button>-->
<!--        </div>-->
<!--        <el-row :gutter="20" class="mainBackgroundColor marginLeft0Right0 border-radius-bottom activity-query-style">-->
<!--            <el-col :span="24" style="padding: 20px 36px">-->
<!--                <el-form ref="formRef" class="formLabel" label-width="auto" size="small">-->
<!--                    <el-form-item label="活动主题：">-->
<!--                        <div v-html="form.title" style="color: #1890FF;font-weight: bold"></div>-->
<!--                    </el-form-item>-->
<!--                    <el-form-item label="活动内容：">-->
<!--                        <div>{{form.description}}</div>-->
<!--                    </el-form-item>-->
<!--                </el-form>-->
<!--            </el-col>-->
<!--        </el-row>-->
<!--        <div class="boxContent padding032 border-radius2 marginTop24">-->
<!--            <div class="tableTop">-->
<!--                <el-button type="primary" size="small" @click="manyVerifier(1)" :disabled="selectionTableData.length <= 0">批量通过</el-button>-->
<!--                <el-button size="small" @click="manyVerifier(2)" :disabled="selectionTableData.length <= 0">批量不通过</el-button>-->
<!--            </div>-->
<!--            <ed-table api="/point/activity/participants" class="tableBox" :params="queryForm" ref="table" @selectionData="selectionData">-->
<!--                <el-table-column type="selection" width="55" :selectable='checkboxInit'></el-table-column>-->
<!--                <el-table-column :show-overflow-tooltip="true" prop="userName" label="姓名"/>-->
<!--                <el-table-column :show-overflow-tooltip="true" prop="mobile" label="手机号"></el-table-column>-->
<!--                <el-table-column :show-overflow-tooltip="true" prop="point" label="积分"/>-->
<!--                <el-table-column :show-overflow-tooltip="true" prop="userType" label="人员类型">-->
<!--                    <template slot-scope="scope">-->
<!--                        {{scope.row.userType == 5 ? "用户" : "工作人员"}}-->
<!--                    </template>-->
<!--                </el-table-column>-->
<!--                <el-table-column :show-overflow-tooltip="true" prop="firstSignTime" label="初次签到时间"/>-->
<!--                <el-table-column :show-overflow-tooltip="true" prop="lastSignTime" label="末次签到时间"/>-->
<!--                <el-table-column :show-overflow-tooltip="true" prop="verifyStatus" label="审核状态">-->
<!--                    <template slot-scope="scope">-->
<!--                        <p v-if="scope.row.verifyStatus == 0" style="color: #FAAD14;">未审核</p>-->
<!--                        <p v-else-if="scope.row.verifyStatus == 1" style="color: #52C41A;">已通过</p>-->
<!--                        <p v-else-if="scope.row.verifyStatus == 2" style="color: #FF4D4F;">未通过</p>-->
<!--                        <p v-else>/</p>-->
<!--                    </template>-->
<!--                </el-table-column>-->
<!--                <el-table-column :show-overflow-tooltip="true" prop="verifierName" label="审核人"/>-->
<!--                <el-table-column :show-overflow-tooltip="true" prop="" label="操作">-->
<!--                    <template slot-scope="scope">-->
<!--                        <div v-if=" scope.row.userType == 5">-->
<!--                            <div class="colorMainTwo fontSize14 inline-block cursorPointer rightBorder8 line-height11" v-if="scope.row.verifyStatus == 0" @click="clickVerifier(scope.row,1)">通过</div>-->
<!--                            <div class="colorMainTwo fontSize14 inline-block cursorPointer rightBorder8 line-height11" style="cursor:not-allowed;opacity: 0.3" v-else>通过</div>-->
<!--                            <div class="colorRed fontSize14 inline-block cursorPointer marginLeft8" v-if="scope.row.verifyStatus == 0" @click="clickVerifier(scope.row,2)">不通过</div>-->
<!--                            <div class="colorRed fontSize14 inline-block cursorPointer marginLeft8" style="cursor:not-allowed;opacity: 0.3" v-else>不通过</div>-->
<!--                        </div>-->
<!--                        <div v-else>-->
<!--                            <div class="colorMainTwo fontSize14 inline-block cursorPointer rightBorder8 line-height11" style="cursor:not-allowed;opacity: 0.3">通过</div>-->
<!--                            <div class="colorRed fontSize14 inline-block cursorPointer marginLeft8" style="cursor:not-allowed;opacity: 0.3">不通过</div>-->
<!--                        </div>-->
<!--                    </template>-->
<!--                </el-table-column>-->
<!--            </ed-table>-->
<!--        </div>-->

<!--    </div>-->

    <div class="boxContentCss">
        <EdCreateCard title="活动详情">
            <template #back>
                <div class="createBack" @click="$utilsSet.goBack($router)" >
                    <svg-icon icon-class="back" /> 返回
                </div>
            </template>
            <div class="">
                <el-row :gutter="20" class="mainBackgroundColor marginLeft0Right0 border-radius-bottom activity-query-style">
                    <el-col :span="24" style="padding: 20px 36px">
                        <el-form ref="formRef" class="formLabel" label-width="auto" size="small">
                            <el-form-item label="活动主题：">
                                <div v-html="form.title" style="color: #1890FF;font-weight: bold"></div>
                            </el-form-item>
                            <el-form-item label="活动内容：">
                                <div>{{form.description}}</div>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>
                <div style="background: #f0f2f5;height: 24px;"></div>
                <div class="boxContent padding032 border-radius2">
                    <div class="tableTop">
                        <el-button type="primary" size="small" @click="manyVerifier(1)" :disabled="selectionTableData.length <= 0">批量通过</el-button>
                        <el-button size="small" @click="manyVerifier(2)" :disabled="selectionTableData.length <= 0">批量不通过</el-button>
                    </div>
                    <ApiTable :api="load" ref="table" :params="queryForm" @selectionData="selectionData">
                        <el-table-column type="selection" width="55" :selectable='checkboxInit'></el-table-column>
                        <el-table-column :show-overflow-tooltip="true" prop="userName" label="姓名"/>
                        <el-table-column :show-overflow-tooltip="true" prop="mobile" label="手机号"></el-table-column>
                        <el-table-column :show-overflow-tooltip="true" prop="point" label="积分"/>
                        <el-table-column :show-overflow-tooltip="true" prop="userType" label="人员类型">
                            <template slot-scope="scope">
                                {{scope.row.userType == 5 ? "用户" : "工作人员"}}
                            </template>
                        </el-table-column>
                        <el-table-column :show-overflow-tooltip="true" prop="firstSignTime" label="初次签到时间"/>
                        <el-table-column :show-overflow-tooltip="true" prop="lastSignTime" label="末次签到时间"/>
                        <el-table-column :show-overflow-tooltip="true" prop="verifyStatus" label="审核状态">
                            <template slot-scope="scope">
                                <p v-if="scope.row.verifyStatus == 0" style="color: #FAAD14;">未审核</p>
                                <p v-else-if="scope.row.verifyStatus == 1" style="color: #52C41A;">已通过</p>
                                <p v-else-if="scope.row.verifyStatus == 2" style="color: #FF4D4F;">未通过</p>
                                <p v-else>/</p>
                            </template>
                        </el-table-column>
                        <el-table-column :show-overflow-tooltip="true" prop="verifierName" label="审核人"/>
                        <el-table-column :show-overflow-tooltip="true" prop="" label="操作">
                            <template slot-scope="scope">
                                <div v-if=" scope.row.userType == 5">
                                    <div class="colorMainTwo fontSize14 inline-block cursorPointer rightBorder8 line-height11" v-if="scope.row.verifyStatus == 0" @click="clickVerifier(scope.row,1)">通过</div>
                                    <div class="colorMainTwo fontSize14 inline-block cursorPointer rightBorder8 line-height11" style="cursor:not-allowed;opacity: 0.3" v-else>通过</div>
                                    <div class="colorRed fontSize14 inline-block cursorPointer marginLeft8" v-if="scope.row.verifyStatus == 0" @click="clickVerifier(scope.row,2)">不通过</div>
                                    <div class="colorRed fontSize14 inline-block cursorPointer marginLeft8" style="cursor:not-allowed;opacity: 0.3" v-else>不通过</div>
                                </div>
                                <div v-else>
                                    <div class="colorMainTwo fontSize14 inline-block cursorPointer rightBorder8 line-height11" style="cursor:not-allowed;opacity: 0.3">通过</div>
                                    <div class="colorRed fontSize14 inline-block cursorPointer marginLeft8" style="cursor:not-allowed;opacity: 0.3">不通过</div>
                                </div>
                            </template>
                        </el-table-column>
                    </ApiTable>
                </div>
            </div>
        </EdCreateCard>
    </div>
</template>

<script>
    import EdCreateCard from 'src/components/EdCreateCard.vue'
    import EdTable from "src/components/EdTable.vue";
    import ApiTable from 'src/components/ApiTable.vue'
    import {checkActivity ,detailActivity ,multiCheckActivity ,participantsActivity} from "src/api/activity"
    export default {
        name: "ActivityQuery",
        components:{
            EdTable,
            EdCreateCard,
            ApiTable
        },
        data(){
            return{
                form:{
                    title:"",
                    description:""
                },
                queryForm:{
                    actId:this.$route.query.id,
                    page: 1,
                    pageSize: 10
                },
                selectionTableData:[]
            }
        },
        mounted() {
            detailActivity({id:this.$route.query.id}).then(response => {
                if(response.code == 20000) {
                    this.form = {
                        title:response.data.title,
                        description:response.data.description,
                    };
                }
            })
            this.$nextTick(()=>{
                this.$refs.table.load(1)
            })
        },
        methods:{
            load:participantsActivity,
            checkboxInit(row) {
                if(row.userType == 5){
                    if (row.verifyStatus == 0) {
                        return 1;
                    } else {
                        return 0; //不可勾选
                    }
                }else {
                    return 0
                }
            },
            clickVerifier(row,value){
                checkActivity({activityId:row.activityId,participantId:row.id,status:value}).then(response => {
                    if(response.code == 20000) {
                        this.$message.success({
                            message: '审核成功！',
                            duration: 2000,
                            center:true
                        });
                        this.$refs.table.load()
                    }
                })
            },
            selectionData(value){
                this.selectionTableData = value;
            },
            manyVerifier(value){
                if(this.selectionTableData.length > 0){
                    let arr = [];
                    for (let i=0;i<this.selectionTableData.length;i++){
                        arr.push(this.selectionTableData[i].id)
                    }
                    multiCheckActivity({activityId:this.selectionTableData[0].activityId,participantId:arr,status:value}).then(response => {
                        if(response.code == 20000) {
                            this.$message.success({
                                message: '审核成功！',
                                duration: 2000,
                                center:true
                            });
                            this.$refs.table.load()
                        }
                    })
                }
            }
        }
    }
</script>

<style lang="scss">
.activity-query-style{
    .formLabel{
        .el-form-item{
            margin: 8px 0;
            .el-form-item__label-wrap{
                .el-form-item__label{
                    line-height: 22px;
                    font-size: 16px;
                    color: #333333;
                }

            }
            .el-form-item__content{
                line-height: 22px;
                font-size: 16px;
                color: #333333;
            }
        }
    }
}
</style>